<template>
  <div class="account-detail-container">
    <div v-if="loading" class="loading-container">
      <van-loading type="spinner" />
      <div class="loading-text">加载中...</div>
    </div>
    
    <div v-else-if="error" class="error-container">
      <div class="error-icon">❌</div>
      <div class="error-text">{{ errorMessage }}</div>
      <van-button type="primary" class="retry-btn" @click="fetchData">重试</van-button>
    </div>
    
    <template v-else>
      <!-- 账户总览卡片 -->
      <div class="overview-card">
        <div class="account-title">{{ account.name }}</div>
        <div class="read-only-badge">只读模式</div>
        <div class="overview-row">
          <div class="overview-item total">
            <span>总金额</span>
            <span class="amount">￥{{ account.total }}</span>
          </div>
          <div class="overview-item ali">
            <span>支付宝</span>
            <span class="amount">￥{{ account.ali }}</span>
          </div>
          <div class="overview-item wx">
            <span>微信</span>
            <span class="amount">￥{{ account.wx }}</span>
          </div>
          <div class="overview-item bank">
            <span>银行卡</span>
            <span class="amount">￥{{ account.bank || 0 }}</span>
          </div>
          <div class="overview-item credit-card">
            <span>信用卡</span>
            <span class="amount">￥{{ account.credit_card || 0 }}</span>
          </div>
        </div>
      </div>
      
      <!-- 明细列表 -->
      <div class="record-list-title">交易明细</div>
      <div v-if="records.length === 0" class="empty-records">
        <div class="empty-icon">📭</div>
        <div class="empty-text">暂无交易明细</div>
      </div>
      <div v-else class="record-list">
        <div class="record-card" v-for="item in records" :key="item.id">
          <div class="record-main">
            <div class="record-type" :class="item.type === 'in' ? 'in' : 'out'">
              {{ item.type === 'in' ? '转入' : '转出' }}
            </div>
            <div class="record-channel" :class="getChannelClass(item.channel)">
              {{ item.channel }}
            </div>
            <div class="record-amount" :class="item.type === 'in' ? 'in' : 'out'">
              {{ item.type === 'in' ? '+' : '-' }}￥{{ item.amount }}
            </div>
          </div>
          <div v-if="item.remark" class="record-remark">
            备注: {{ item.remark }}
          </div>
          <div class="record-footer">
            <span class="record-date">{{ formatDate(item.date) }}</span>
          </div>
        </div>
      </div>
      
      <!-- 返回按钮 -->
      <van-button class="back-btn" icon="arrow-left" type="primary" @click="goBack">返回用户页面</van-button>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Loading, Button, showFailToast } from 'vant'
import { accountApi } from '@/api'
import dateUtils from '@/utils/date'

const route = useRoute()
const router = useRouter()
const userId = ref(atob(route.params.userId))
const accountId = ref(route.params.accountId)
const loading = ref(true)
const error = ref(false)
const errorMessage = ref('')
const account = ref({
  name: '',
  total: '0.00',
  ali: '0.00',
  wx: '0.00',
  bank: '0.00',
  credit_card: '0.00',
})
const records = ref([])

function formatDate(date) {
  return dateUtils.format(date, 'YYYY-MM-DD HH:mm');
}

function getChannelClass(channel) {
  switch (channel) {
    case '微信':
      return 'wx'
    case '支付宝':
      return 'ali'
    case '银行卡':
      return 'bank'
    case '信用卡':
      return 'credit-card'
    default:
      return ''
  }
}

async function fetchData() {
  if (!userId.value || !accountId.value) {
    error.value = true
    errorMessage.value = '缺少必要参数'
    loading.value = false
    return
  }
  
  loading.value = true
  error.value = false
  
  try {
    // 并行请求账户详情和交易记录
    const [accountData, recordsData] = await Promise.all([
      accountApi.getAccountDetail(accountId.value, userId.value),
      accountApi.getAccountRecords(accountId.value, userId.value)
    ]);
    
    account.value = accountData;
    records.value = recordsData;
    
    loading.value = false;
  } catch (err) {
    console.error('获取数据失败:', err);
    error.value = true;
    errorMessage.value = err.response?.data?.error || '获取数据失败';
    loading.value = false;
    showFailToast(errorMessage.value);
  }
}

function goBack() {
  router.push(`/user/${userId.value}/status`);
}

onMounted(() => {
  fetchData();
})
</script>

<style scoped>
.account-detail-container {
  min-height: 100vh;
  background: #f6f7fb;
  padding: 16px 6px 80px 6px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

.loading-text {
  margin-top: 16px;
  color: #666;
}

.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.error-text {
  color: #ff4d4f;
  margin-bottom: 16px;
  text-align: center;
}

.retry-btn {
  margin-top: 16px;
}

.overview-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
  margin: 0 0 16px 0;
  padding: 16px 16px 10px 16px;
  position: relative;
}

.account-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin-bottom: 10px;
  text-align: center;
}

.read-only-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #ff9800;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.overview-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.overview-item {
  flex: 1;
  text-align: center;
  font-size: 14px;
  min-width: 80px;
  margin-bottom: 8px;
}

.overview-item .amount {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-top: 2px;
  white-space: normal;
  margin-left: auto;
  margin-right: auto;
}

.overview-item.total .amount {
  color: #27c19e;
}

.overview-item.ali .amount {
  color: #1677ff;
}

.overview-item.wx .amount {
  color: #07c160;
}

.overview-item.bank .amount {
  color: #ff9500;
}

.overview-item.credit-card .amount {
  color: #9c27b0;
}

.record-list-title {
  font-size: 15px;
  color: #666;
  margin: 10px 0 8px 4px;
  font-weight: 500;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 6px 0 rgba(0,0,0,0.03);
  padding: 12px 14px 8px 14px;
}

.record-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.record-remark {
  font-size: 12px;
  color: #888;
  margin: 4px 0 8px 0;
  padding-left: 4px;
  border-left: 2px solid #eee;
}

.record-type {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 12px;
  background: #f6f7fb;
  font-weight: 500;
}

.record-type.in {
  color: #27c19e;
  background: #e6f9f3;
}

.record-type.out {
  color: #ff5b5b;
  background: #fff0f0;
}

.record-channel {
  font-size: 13px;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 500;
  background: #f6f7fb;
}

.record-channel.wx {
  color: #07c160;
  background: #e6f9f3;
}

.record-channel.ali {
  color: #1677ff;
  background: #e6f3ff;
}

.record-channel.bank {
  color: #ff9500;
  background: #fff7e6;
}

.record-channel.credit-card {
  color: #9c27b0;
  background: #f3e5f5;
}

.record-amount {
  margin-left: auto;
  font-size: 14px;
  font-weight: bold;
  white-space: normal;
}

.record-amount.in {
  color: #27c19e;
}

.record-amount.out {
  color: #ff5b5b;
}

.record-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #aaa;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #eee;
}

.record-date {
  font-size: 12px;
  color: #999;
}

.empty-records {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #aaa;
}

.empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.empty-text {
  font-size: 14px;
}

.back-btn {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  padding: 0 20px;
}
</style> 